<template>
  <div class="approDetail">
      <div class="approveItem">
          <h1 class="titleDesc"><span v-if="isLeaveICon">{{res.name}}的请假申请</span><span v-else>{{res.name}}的销假申请</span></h1>
          <p><i class="icon-approve"></i><span :class='hasClass(res.audit_status_name)'>{{res.audit_status_name}}</span></p>
          <div @click="showDetail" v-if="relateId" class="showButton"><span v-if="isLeaveICon">查看该流程销假详情</span><span v-else>查看该流程请假详情</span></div>
          <div class="borderColor"></div>    
      </div>
      <div class="desc">
            <ul>
                <li><span class="title">审批编号</span><span class="desc_detail">{{res.busi_id || res.applyId}}</span></li>
                <li><span class="title" v-if="isLeaveICon">请假类型</span><span class="title" v-else>销假类型</span><span class="desc_detail">{{res.leave_name}}</span></li>
                <li><span class="title">所在部门</span><span class="desc_detail">{{res.dept_name}}</span></li>
                <li><span class="title" v-if="isLeaveICon">开始时间</span><span class="title" v-else>实际开始时间</span><span class="desc_detail">{{res.start_time}} {{res.Leave_st_section === '1' ? '上午' : '下午'}}</span></li>
                <li><span class="title" v-if="isLeaveICon">结束时间</span><span class="title" v-else>实际结束时间</span><span class="desc_detail">{{res.end_time}} {{res.Leave_end_section === '1' ? '上午' : '下午'}}</span></li>
                <li><span class="title" v-if="isLeaveICon">请假天数</span><span class="title" v-else>请假天数</span><span class="desc_detail">{{res.leave_day}}天</span></li>
                <li><span class="title" v-if="isLeaveICon">请假事由</span><span class="title" v-else>销假事由</span><span class="desc_detail">{{res.leave_reason}}</span></li>
                <li><span class="title">知会人  </span><span class="desc_detail">{{zhihuirens}}</span></li>
                <!-- <li><span class="title">当前步骤</span><span class="desc_detail" :class='hasClass(res.audit_status_name)'>{{res.audit_status_name}}</span></li> -->
               
            </ul>



            <div class="startItem">
                <div class="leftCon">
                    附&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件
                </div>

                <div class="fluid">
                    <img :src='Axios.baseURI+"/"+URL.downloadFile.url+"?id="+k.id+"&token="+token' @click="previewPhoto(index)" v-for='(k,index) in imgList'  alt="">
                    <div
                        
                        download="img"
                        style='display:block'
                        class='color-third' 
                        @click="previewFile(k)"
                        v-for='(k,i) in fileList'>
                        <i :class="textExtension(k)"></i>
                        <span>{{k.fileName}}</span>
                        </div>

                </div>
            </div>

      </div>
      <div class="bgColor"></div>
      <div class="progress">
            <div class="leftCon">
                <div></div>
            </div>
            <div class="fluid">
                  <ul>
                      <li v-for='(k,i) in LogList'><i :class='setColor(k)' class="icon-process"></i><span class="name">{{k.loger_oper}}</span><span class="dept">({{k.dept_descr}})</span><span :class='hasClass(k.oper_result_name)' class="start">{{k.oper_result_name}}</span><span class="time">{{k.loger_date | handleEndTime}}</span>
                           <div class="apprDesc" v-if='k.loger_info'>{{k.loger_info}}</div>
                      </li>
                      
                  </ul>
            </div>          
      </div>
      <div class="bgColorBottom">

      </div>
      <div class="fixedToBottom">
          <div class="approBtn">
                <div class="approBtnCol" @click="goToDetail('1')">同意</div>
                <div class="approBtnCol" @click="goToDetail('2')">驳回</div>
          </div>
      </div>

      <mt-spinner v-if="spinnerShow" class="spinner" type="fading-circle" color="#26a2ff"></mt-spinner>
      <v-panel v-if="showPanel" :secondShow.sync="secondShow" :relateId="relateId" :isShow.sync="showPanel" :isFirstShow.sync="isFirstShow" @loadEnd="loadEnd"></v-panel>

  </div>

</template>

<script>
import Vue from "vue";
import { Spinner} from "mint-ui";
Vue.component(Spinner.name, Spinner);
import preview from '@/common/js/preview' 
import Panel from '@/components/public/panel'

// import wx from '@/common/js/weixin.js'

export default {
  name: 'app',
  data() {
    return {
      approve:"部门领导审批",
      res:{},
      query:null,
      fileList:[],
      LogList:[],

      imgList:[],
      imgUrlList:[],
      zhihuirens:null,

      busi_id:null,

      relateId:null,
      showPanel:false,
      isFirstShow:true,
      secondShow:false,
      spinnerShow:false,

      nextUserName:null,

      jsapi_ticket:null,
    };
  },
  components:{
      'v-panel':Panel
  },
  methods: {

        loadEnd:function(){
            this.spinnerShow = false;
        },

        showDetail:function(){

            if (this.isFirstShow) {
                this.spinnerShow = true;
                this.showPanel = true;
                this.secondShow = true;
            } else {
                this.spinnerShow = false;
                this.secondShow = true;
            }
            
        },



      hasClass:function(status){
            // var status = this.itemData.auditStatus || this.itemData.activityFlag;
            if (!status) {return;}
            if (status.indexOf('拒绝') > -1) {
                return {'reject':true};
            } else if (status.indexOf('审批中') > -1 || status.indexOf('备案中') > -1 || status.indexOf('待备案') > -1 || status.indexOf('待审批') > -1) {
                return {'waitAppro':true};
            } else if(status.indexOf('已备案') > -1 || status.indexOf('已同意') > -1 || status.indexOf('审批同意') > -1){
                return {'Appro':true}
            }else{
                return {'color':true};
            }
      },
      setColor:function(k){
           if (!k) {
                return;
           }
           if (k.oper_result_name=="审批中"  || k.oper_result_name.indexOf('待审批') > -1 || k.oper_result_name.indexOf('备案中') > -1  || k.oper_result_name=="待备案") {
               return "";
           } else {
               return 'color';
           }
        
      },
      getDetail:function(){

          let params = {
              applyId: this.busi_id ,
              exectionId: this.busi_id 
          };

          this.Axios
            .Post(this.URL.examineBydetails.url, params)
            .then((res) => {
                this.res = res.data.datas || {};
                this.relateId = this.res.relate_id || '';
                // var zhihuiList = res.data.datas[2];
                // this.nextUserName = res.data.datas[1].nextUserName || '';
                // if (zhihuiList) {
                //     Object.keys(zhihuiList).forEach((val,index)=>{
                //         this.zhihuirens ? this.zhihuirens = this.zhihuirens + '、' +zhihuiList[val] : this.zhihuirens = zhihuiList[val];
                //     })
                // }

                this.nextUserName = this.res.nextUserName || '';
                this.zhihuirens =  this.res.ZHR || '';

            })

          // var res = {"status":0,"message":"查询成功","total":null,"datas":{"start_time":"2017-12-16","Leave_end_section":"2","trialstep":"部门领导审批","leave_name":"事假","end_time":"2017-12-17","name":"孔颂杰","leave_reason":"'16:53'","exectionId":"95009","list":[{"name":"何锦龙","proname":"部门领导审批","startTime":"2017-12-02 16:57:56"},{"name":"孔颂杰","proname":"提交请假申请","startTime":"2017-12-02 16:57:56","endTime":"2017-12-02 16:57:56"},{"name":"孔颂杰","proname":"提交请假申请","startTime":"2017-12-02 16:57:56","endTime":"2017-12-02 16:57:56"}],"leave_day":"0.0","Leave_st_section":"1","deptname":"国际总部人力资源部（监察部）"},"page":null,"token":null};
      },
      goToDetail:function(type){
          localStorage.setItem('approRes',JSON.stringify({
              type:type,
              EX:this.res.busi_id,
              AC:this.res.activity_id?this.res.activity_id:'',
              NU:this.nextUserName,
              AT:this.res.activity_id || ''
          }));
          location.href="/module/approveRes.html";
      },
      textExtension:function(item){
         if ((/(\.jpg|\.png|\.gif|\.ps|\.jpeg)$/g).test(item.fileName)){
             return 'icon-img';
         } else if ((/(\.word|\.doc)$/g).test(item.fileName)) {
             return 'icon-word'
         } else if ((/(\.pdf)$/g).test(item.fileName)) {
             return 'icon-pdf'
         } else if ((/(\.ppt|\.pptx)$/g).test(item.fileName)) {
             return 'icon-ppt'
         } else if ((/(\.xls|\.xlsx)$/g).test(item.fileName)) {
             return 'icon-excel'
         } else {
             return 'icon-docu'
         }
      },

      previewPhoto:function(index){




            // var obj = {
            //     urls : this.imgUrlList,
            //     current : this.imgUrlList[index]
            // };
            // preview.start(obj);  



            console.log(this.imgUrlList,this.imgUrlList[index],index,'previewImg')
            try {
                wx.previewImage({
                    current: this.imgUrlList[index], // 当前显示的图片链接
                    urls: this.imgUrlList // 需要预览的图片链接列表
                });
            }catch(err){
                console.log(err);
            }


            // wx.previewImage({
            //     current: this.imgUrlList[index], // 当前显示的图片链接
            //     urls: this.imgUrlList // 需要预览的图片链接列表
            // });

      },

        previewFile : function(k){

            // console.log('url',this.Axios.baseURI + this.URL.downloadFile.url + "?id=" + k.id + "&token="+ this.token)
            // console.log('name',k.fileName)
            // console.log('wx',wx)
            wx.previewFile({
                url: this.Axios.baseURI + this.URL.downloadFile.url + "?id=" + k.id + "&token="+ this.token, // 需要预览文件的地址(必填，可以使用相对路径)
                name: k.fileName,
                size: '7134969'
            });   
            // wx.previewFile({
            //     url: 'https://m2.cmhk.com/WXP/attachProxy?id=15d1473008107e82f26434f4d1489f3c&user=xgt&password=ff7314db6b3cd57dc966259f7be35e68', // 需要预览文件的地址(必填，可以使用相对路径)
            //     name: '商业银行业务连续性监管指引.pdf',
            //     size: '7134969'
            // });   
                   
        },

       wxConfig : function () {
            //alert('ddd='+jsapi_ticket);
            //获取当前url，不含#以及之后的部分
            //var timestamp = new Date().getTime(); //生成签名的时间戳(当前时间)
		    var timestamp = Date.parse(new Date())/1000;
		    var noncestr = this.randomString(16);
            var url = window.location.href;
            // var url = 'http://m2.cmhk.com:8080/module/approveDetail.html';
            var index = url.indexOf('#');
            if(index !== -1 ) {
                url = url.slice(0,index);
            }
            // this.jsapi_ticket="HoagFKDcsGMVCIY2vOjf9gXRpbaCGInwR_o3ym04PkbYRz1T-fxUauc36IU38BE7ypXPvQn1Jj593lCYf-SdIw";
            var temp = "jsapi_ticket="+this.jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;
            console.log("jsapi_ticket="+this.jsapi_ticket);
            console.log("timestamp="+timestamp);
            console.log("noncestr="+noncestr);
            console.log("temp="+temp);
            var signature = sha1(temp);
            console.log("signature="+signature);
            console.log("wx配置注册================");
            wx.config({
                beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'ww8976d3a691029d70', // 必填，企业微信的corpID
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: noncestr, // 必填，生成签名的随机串
                signature: signature,// 必填，签名，见[附录1](#11974)
                jsApiList: [
                    'checkJsApi',
                    'previewImage',
                    'previewFile'

                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
        
            wx.ready(() => {
                console.log('ready');
                //分享到朋友圈
                //wx.previewImage({
                //    current: '', // 当前显示的图片链接
                //    urls: [] // 需要预览的图片链接列表
                //});
                this.checkJsApi();


            });
            wx.error(function(res){
            	console.log("微信JS SDK配置错误！",res);
            });
        },
        checkJsApi:function(){
            console.log("checkJsApi");
            wx.checkJsApi({
                jsApiList: ["previewImage", "previewFile"],
                success: function(a) {
                    console.log(a,'checkJS')
                    alert(JSON.stringify(a,'checkJS'))
                },
                fail:function(err){
                    console.log(err,'errJSCheck')
                }
            });
        },
        randomString : function(len) {
            len = len || 32;
            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';  /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
            var maxPos = $chars.length;
            var pwd = '';
            for (var i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        },




  
  
  
  },

  computed:{
    isLeaveICon:function(){
        if ((this.busi_id && this.busi_id.indexOf('XJ')>-1)|| (this.busi_id && this.busi_id.indexOf('XJ')>-1)) {
            return false;
        }
        return true;
    }
  },
  filters:{
    handleEndTime:function(val){
        if (val){
          return val.replace(/\-/g,'.').slice(5);
        }
    }
  },
  watch: {

  },
  created(){



    // var arr = [];
    // location.search.split('&').forEach(function(val,index){
    //     arr.push(val.split('=')[1])
    // })
    // this.query = arr;
    // this.token = localStorage.getItem('token');
    // this.busi_id = this.query[0];
    // if (this.query) {
    //     console.log(this.query);
    //     var params= {};
    //     params.busi_id = this.query[0];
    //     this.Axios
    //         .Post(this.URL.getFileListByBusiId.url,params)
    //         .then((res) => {
    //                 var resultList = res.data.datas;
                    
    //                 resultList.forEach((val,index,arr) => {
    //                     if (this.textExtension(val) === 'icon-img'){
    //                         this.imgList.push(val)
    //                         this.imgUrlList.push(this.Axios.baseURI+"/"+this.URL.downloadFile.url+"?id="+val.id+"&token="+this.token)
    //                     } else {
    //                         this.fileList.push(val)
    //                     }
    //                 })
    //         })
                    
    //     this.Axios
    //         .Post(this.URL.getApprovedLogList.url, params)
    //         .then((res) => {
    //             this.LogList = res.data.datas;
                
    //         })

    // }



    var paras = {};

    if (location.search && location.search.split('&')) {

        var arr = [], params={};
        var arr = location.hash.split('?')[1].split('&');

        arr.forEach(function(val,index,arr){
            var keyArr = val.split('=');
            var key = keyArr[0];
            var value = keyArr[1];
            params[key] = value;
        });

        this.token = params['token'];
        paras.busi_id = params['busiId'];
        localStorage.setItem('token',token);
        


    } else {

        this.token = localStorage.getItem('token');
        var app_Id = localStorage.getItem('app_AI');
        this.busi_id = app_Id;
        paras.busi_id = localStorage.getItem('app_AI');  

    }


    

    this.Axios
        .Post(this.URL.getFileListByBusiId.url,paras)
        .then((res) => {
            var resultList = res.data.datas;
            
            resultList.forEach((val,index,arr) => {
                if (this.textExtension(val) === 'icon-img'){
                    this.imgList.push(val)
                    this.imgUrlList.push(this.Axios.baseURI+"/"+this.URL.downloadFile.url+"?id="+val.id+"&token="+this.token)
                } else {
                    this.fileList.push(val)
                }
            })
            console.log(this.fileList,"this.fileList")
        })
                
    this.Axios
        .Post(this.URL.getApprovedLogList.url, paras)
        .then((res) => {
            this.LogList = res.data.datas;
            
        })

    this.getDetail();






	},
  mounted: function() {
        // this.jsapi_ticket  = "HoagFKDcsGMVCIY2vOjf9gXRpbaCGInwR_o3ym04PkZcM_HxoCuqb2btH6IWl_oNA1rRXqpfVHUeR96BgiVZHw"

        
        // this.wxConfig();         
        this.Axios
            .Post(this.URL.getTicket.url, {})
            .then((res) => {
               this.jsapi_ticket = res.data.datas.result.ticket;
               console.log(this.jsapi_ticket,'this.jsapi_ticket');
               this.wxConfig();               
            })
  }
};
</script>

<style >
    html body{
      background-color:#F3F3F3;
    }

</style>
<style lang="less" scope="scope">

    .color{
        color:#0079E3;
    }
    .isAppro{
        color:#D8D41D;
    }
    .reject{
        color:#E24040;
    }
    .waitAppro{
        color:#D8D41D;
    }
    .Appro{
        color:#48A18C;              
    }

  .approDetail{
      font-family:   "Microsoft YaHei", "微软雅黑";
      .approveItem{
          
          padding-top:0.26rem;
          background-color:#fff;
          .titleDesc{
              padding-left:0.3rem;
              font-size:0.4rem;
              position: relative;
              line-height:0.48rem;
          }
          p{
            display:flex;
            font-size:0.32rem;
            color:#999;
            padding-left:0.3rem;
            margin:0.1rem auto;
            align-items: center;
            .leaderAppr{
              color:#D8D41D;
            }
            i{
              margin-right:0.1rem;
            }
          }
          .borderColor{
            border-bottom:1px solid #F3F3F3;
          }
      }

      .desc{
          font-size:0.32rem;
          padding-bottom:0.8rem;
          background-color:#fff;
          padding-top:0.2rem;
          li{
            line-height:0.6rem;
            display: flex;
            align-items: flex-start;
            align-content: flex-start;
            .title{
              color:#999;
              width: 2rem;
              margin:0 0.2rem 0 0.3rem;
            }
            .desc_detail{
              word-wrap:break-word;
              word-spacing:normal;
              max-width:5.2rem;
            }
          }
          .startItem {
              display: flex;
              margin-top:0.12rem;
              .leftCon{
                  color:#999;
                  margin: 0 0.86rem 0 0.3rem;               
              }
              .fluid{
                  flex: 1;
                  padding-right:0.3rem;
                  img{
                    display: inline-block;
                    max-height:1rem;
                    margin-right:0.1rem;
                  }

              }
          }

      }
      .bgColor{
        height:0.1rem;
        background-color:#F3F3F3;
      }
      .progress {
          display: flex;
          background-color:#fff;
          border-bottom: 1px solid #F3F3F3;
          .leftCon{
              margin:0 0.3rem;   
              border-left:0.02rem dotted #999;             
          }
          .fluid{
              flex: 1;
              padding-right:0.3rem;
              i.icon-process{
                color: #aaa;
                position: absolute;
                left: -0.46rem;
                top: 0.26rem;
                z-index:100;
              }
              ul{
                  margin-top:0.24rem;
                  margin-bottom:0.3rem;
                  li{
                    position:relative;
                    font-size:0.28rem;
                    line-height:0.8rem;
                    >span:not(.name){
                      display:inline-block;
                      line-height:0.28rem;
                    }
                    .color{
                      color:#0079E3;
                    }
                    .success{
                      color:#339966;
                    }
                    .isAppro{
                      color:#D8D41D;
                    }
                    .reject{
                        color:#E24040;
                    }
                    .waitAppro{
                        color:#D8D41D;
                    }
                    .Appro{
                        color:green;                
                    }
                    .name{
                      font-size:0.32rem;
                      margin-right:0.1rem;
                      font-weight:600;
                    }
                    .dept{
                      margin-right:0.2rem;
                    }
                    .start{
                      margin-right:0.3rem;
                    }
                    // .time{
                    //   float:right;
                    //   margin-top: 0.32rem;
                    // }
                    div.apprDesc{
                      font-size:0.32rem;
                      word-wrap:break-word;
                      word-spacing:normal;
                      max-width: 6.5rem;
                    }
                    div.detail{
                      // display: inline-block;
                      // width:80%;
                      float:right;
                      line-height:0.28rem;
                      vertical-align: middle;
                      text-align:right;
                    }
                  } 
              }

          }
      }
      .fixedToBottom{
          position:fixed;
          z-index:1500;
          bottom:0;
          left:0;
          right: 0;
          .approBtn{
              display: flex;
              height:0.8rem;
              align-items: center;
              font-size:0.32rem;
              font-weight:600;
              border-top:1px solid #F3F3F3;
              background-color:#fff;
              div.approBtnCol{
                flex:1;
                text-align:center;
                height:0.8rem;
                color:#007DE4;
                line-height:0.8rem;
              }
              div:not(last-child){
                border-right:1px solid #F3F3F3;
              }
          }
      }
  }


  .bgColorBottom{
      height: 1rem;
      width:100%;
  }
  .showButton{
    height: 0.6rem;
    line-height:0.6rem;
    border: none;
    width:100%;
    text-align:left;
    padding-left:0.3rem;
    outline: none;
    font-size: 0.32rem;
    font-weight: normal;
    color: #fff;
    color: #007de4;
  }
.spinner>div{
    position: fixed;
    top:0;
    bottom:0;
    left: 0;
    right:0;
    margin:auto;
    width: 1rem !important;
    height: 0.8rem !important;
}


</style>

